<template>
  <div class="app-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">控制台 </el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">声音复刻</a></el-breadcrumb-item>
      <el-breadcrumb-item>购买</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="main dialog-form">
      <h1>购买声音复刻</h1>
      <div class="tips">
        <i class="el-icon-warning"></i>
        <span
          >首次复刻成功24小时后才能使用。「智能体 -> 配置角色 -> 角色音色」
          里选择使用。一个复刻的声音只能同时给2台设备使用。</span
        >
        <el-button type="text">操作指引</el-button>
        <el-button type="text">联系客服</el-button>
      </div>
      <div class="flx-ed">
        <el-button type="primary" size="mini" @click="handleToPage">购 买</el-button>
      </div>
      <el-empty :description="`   `">
        <el-button type="primary" size="mini" @click="handleToPage">购 买</el-button>
      </el-empty>
    </el-card>
    <!--  底部  -->
    <detault-footer />
  </div>
</template>
<script>
export default {
  name: "Agents",
  data() {
    return {
      open: false,
      title: "",
      form: {},
      queryParams: {},
      loading: false,
      sysUserList: [{}],
      showSearch: true,
    };
  },
  methods: {
    // 获取列表数据
    getList() {},
    // 关闭弹窗
    cancel() {
      this.open = false;
      this.reset();
    },
    // 弹窗提交
    submitForm() {},
    // 添加产品
    handleAdd() {
      this.title = "创建产品（SKU）";
      this.form = {};
      this.open = true;
      console.log(this.open);
    },
    // 修改产品
    handleEdit(item) {
      this.title = "编辑产品";
      this.open = true;
    },
    // 表单初始化
    reset() {
      this.form = {};
      this.$refs.child.resetFormFun();
    },
    // 搜索
    handleQuery() {},
    handleToPage() {
      this.$router.push("/voice/buy");
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.tips {
  padding: 8px 12px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  word-wrap: break-word;
  border-radius: 8px;
  color: gray;
  gap: 8px;
  background-color: #e6f4ff;
  border: 1px solid #91caff;
  .el-icon-warning {
    color: #1890ff;
  }
}
.flx-ed {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 22px auto;
}

</style>
